<template>
  <div class="vehicle-details-wrap">
    <div class="box">
      <FormPanel ref="searchOrdersPanel" :list="searchOrdersList" :cols="4" :labelWidth="90" :isSubmitBtn="false" @formChange="getOrderList" />
      <el-row>
        <el-button type="primary" @click="query">查 询</el-button>
        <!--  :loading="addBtnState" -->
        <el-button type="primary" @click="reset">重 置</el-button>
      </el-row>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
    >
    </FilterTable>
    <div class="footer">
      <el-button type="primary">收 款</el-button>
      <el-button type="primary">减 免</el-button>
      <el-button type="primary">赊 账</el-button>
      <el-button type="primary" @click="giveCarExport">导 出</el-button>
    </div>
    <BaseDialog :visible.sync="showReceiptsDetail" title="附加项目选择" width="800px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ReceiptsDetail ref="receiptsDetail" @close="closeReceiptsDetail" />
    </BaseDialog>
  </div>
</template>

<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import ReceiptsDetail from './receiptsDetail';
import { exportExcelFile } from '@/utils/index';
import { getJxsSelect, getOrderList } from '@/api/finance/repair/receivables';

export default {
  name: 'Receivables1',
  components: {
    ReceiptsDetail
  },
  mixins: [dictionary],
  data() {
    // this.dmsFunc = { dmsFuncId: 55100010 };
    return {
      searchOrdersList: this.createSearchOrdersList(),
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      fetchApi: getOrderList,
      onChangeColumn: [],
      showReceiptsDetail: false
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getJxsSelect();
    this.query();
  },
  methods: {
    createSearchOrdersList() {
      return [
        {
          type: 'SELECT',
          label: '经销商',
          itemList: [],
          fieldName: 'dealerCode'
        },
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo'
        },
        {
          type: 'INPUT',
          label: '索赔申请单号',
          fieldName: 'roNo1'
        },
        {
          type: 'SELECT',
          label: '是否结清',
          fieldName: 'payOff',
          itemList: this.createDictList('1004')
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName'
        },
        {
          type: 'INPUT',
          label: '收费对象代码',
          fieldName: 'paymentObjectCode'
        },
        {
          type: 'INPUT',
          label: '备件销售单号',
          fieldName: 'salesPartNo'
        },
        {
          type: 'SELECT',
          label: '是否关单',
          fieldName: 'balanceClose',
          itemList: this.createDictList('1004')
        },
        {
          type: 'SELECT',
          label: '是否欠款结算',
          fieldName: 'arrBalance',
          itemList: this.createDictList('1004')
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: '收费对象名称',
          fieldName: 'paymentObjectName'
        },
        {
          type: 'INPUT',
          label: '结算单号',
          fieldName: 'paymentObjectName'
        },
        {
          type: 'SELECT',
          label: '已全部开票',
          fieldName: 'invoiceTag',
          itemList: this.createDictList('1004')
        },
        {
          type: 'SELECT',
          label: '工单类型',
          fieldName: 'roType',
          itemList: this.createDictList('1253')
        },
        {
          type: 'RANGE_DATE',
          label: '结算日期',
          fieldName: 'date',
          selfCols: 2
        },
        {
          type: 'RANGE_DATE',
          label: '结清日期',
          fieldName: 'date1'
        },
        {
          type: 'RANGE_DATE',
          label: '关单日期',
          fieldName: 'date2'
        },
        {
          type: 'INPUT',
          label: '索赔单号',
          fieldName: 'claimNo'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 200,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.openReceiptsDetail(props.row)}>
                  收款明细
                </el-button>
              </div>
            );
          }
          // <el-divider direction="vertical" />
          // <el-button size="mini" type="text" onClick={()=>this.detail(props.row)}>
          //   明细
          // </el-button>
          // <el-divider direction="vertical" />
          // <el-button size="mini" type="text" disabled={props.row.lockFlag === 10041002} onClick={()=>this.removelock(props.row.employeeId)}>
          //   解锁
          // </el-button>
          // <el-divider direction="vertical" />
          // <el-button size="mini" type="text" disabled={props.row.lockFlag === 10041001} onClick={()=>this.lock(props.row.employeeId)}>
          //   锁定
          // </el-button>
        },
        {
          title: '经销商简称',
          dataIndex: 'ASC_SHORTNAME',
          sorter: true
        },
        {
          title: '是否关单',
          dataIndex: 'BALANCE_CLOSE',
          sorter: true
        },
        {
          title: '是否欠款结算',
          dataIndex: 'ARR_BALANCE',
          sorter: true
        },
        {
          title: '结算单号',
          dataIndex: 'BALANCE_NO',
          sorter: true
        },
        {
          title: '工单类型',
          dataIndex: 'RO_TYPE',
          sorter: true
        },
        {
          title: '结算时间',
          dataIndex: 'BALANCE_TIME',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '结清时间',
          dataIndex: 'SQUARE_DATE',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '关单日期',
          dataIndex: 'BALANCE_CLOSE_TIME',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '收费对象代码',
          dataIndex: 'PAYMENT_OBJECT_CODE',
          sorter: true
        },
        {
          title: '收费对象名称',
          dataIndex: 'PAYMENT_OBJECT_NAME',
          sorter: true
        },
        {
          title: '应收账款',
          dataIndex: 'RECEIVABLE_AMOUNT',
          sorter: true
        },
        {
          title: '已收账款',
          dataIndex: 'RECEIVED_AMOUNT',
          sorter: true
        },
        {
          title: '已免账款',
          dataIndex: 'DERATED_AMOUNT',
          sorter: true
        },
        {
          title: '未收账款',
          dataIndex: 'NOT_RECEIVED_AMOUNT',
          sorter: true
        },
        {
          title: '已全部开票',
          dataIndex: 'IS_ALL_INVOICE',
          sorter: true
        },
        {
          title: '是否结清',
          dataIndex: 'PAY_OFF',
          sorter: true
        },
        {
          title: '工单号',
          dataIndex: 'RO_NO',
          sorter: true,
          width: 130,
          showOverflowTooltip: true
        },
        {
          title: '备件销售单号',
          dataIndex: 'SALES_PART_NO',
          sorter: true
        },
        {
          title: '服务工程师',
          dataIndex: 'SERVICE_ADVISOR_NAME',
          sorter: true
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          sorter: true
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          sorter: true
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          minWidth: 160
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_NAME',
          sorter: true
        },
        {
          title: 'PAY_TYPE_CODE',
          dataIndex: 'PAY_TYPE_CODE',
          sorter: true
        },
        {
          title: 'INVOICE_TYPE_CODE',
          dataIndex: 'INVOICE_TYPE_CODE',
          sorter: true
        },
        {
          title: '保险公司',
          dataIndex: 'INSURATION_CODE',
          sorter: true
        },
        {
          title: '理赔单号',
          dataIndex: 'INSURATION_NO',
          sorter: true
        },
        {
          title: '索赔申请单号',
          dataIndex: 'CLAIM_NO',
          sorter: true
        }
      ];
    },
    query() {
      this.$refs.searchOrdersPanel.SUBMIT_FORM();
    },
    async getJxsSelect() {
      const res = await getJxsSelect();
      // console.log(res)
      this.searchOrdersList[0].itemList = res.map(x => ({ value: x.DEALER_CODE, text: x.ASC_SHORTNAME }));
    },
    reset() {
      this.$refs.searchOrdersPanel.RESET_FORM();
      this.getOrderList();
    },
    getOrderList(val) {
      this.fetchParams = Object.assign({}, val);
    },
    openReceiptsDetail(data) {
      // console.log(data)
      // console.log(data.BALA_PAYOBJ_ID)
      // console.log(data.BALANCE_NO)
      this.showReceiptsDetail = true;
      this.$nextTick(() => {
        this.$refs.receiptsDetail.openModel(data);
      });
    },
    // 导出
    giveCarExport() {
      getOrderList(this.fetchParams).then(res => {
        exportExcelFile(res, '交车确认');
      });
    },

    closeReceiptsDetail() {
      this.showReceiptsDetail = false;
    }
  }
};
</script>

<style lang="less" scoped>
.vehicle-details-wrap {
  position: relative;
  padding-bottom: @modulePadding;
  .box {
    border: 1px solid #ccc;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    border-radius: @borderRadius;
    margin-bottom: 20px;
    box-shadow: @boxShadow;
    display: flex;
    flex-direction: column;
    .el-row {
      text-align: center;
    }
  }
  .left {
    position: absolute;
    left: 0;
    width: calc(100% - 300px);
    border: 1px solid @borderColor;
    border-radius: @borderRadius;
    box-shadow: @boxShadow;
    padding: @modulePadding;
    padding-left: 0;
  }
  .right {
    margin-left: calc(100% - 280px);
    border: 1px solid @borderColor;
    border-radius: @borderRadius;
    box-shadow: @boxShadow;
    padding: @modulePadding;
  }
  .choose-style {
    color: @primaryColor;
  }
}
</style>
